<!DOCTYPE html>
<html lang='zh-CN'>
	<head>
		<title>Recorder</title>
		<meta http-equiv='content-Type' content='text/html; charset=utf8' />
		<meta http-equiv="description" content='App main window' />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- css导入 -->
		<link rel='stylesheet' type='text/css' href='css/index2.css'/>
		<link rel='stylesheet' type='text/css' href='css/normalize.css'/>
		<!-- 导入bootstrap和jquery -->
		<script>
		    window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');
		    require('../node_modules/bootstrap/dist/js/bootstrap.min.js');
		</script>
		<script type="text/javascript" src='../node_modules/jquery/dist/jquery.min.js'></script>
		<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src='../node_modules/bootstrap/dist/js/bootstrap.min.js'></script>


		<link rel="stylesheet" href="CodeMirror/lib/codemirror.css" />


		<!--引入css文件，用以支持主题-->
		<link rel="stylesheet" href="CodeMirror/theme/3024-day.css">
		<link rel="stylesheet" href="CodeMirror/theme/3024-night.css">
		<link rel="stylesheet" href="CodeMirror/theme/base16-dark.css">
		<link rel="stylesheet" href="CodeMirror/theme/base16-light.css">
		<link rel="stylesheet" href="CodeMirror/theme/colorforth.css">
		<link rel="stylesheet" href="CodeMirror/theme/dracula.css">
		<link rel="stylesheet" href="CodeMirror/theme/eclipse.css">
		<link rel="stylesheet" href="CodeMirror/theme/elegant.css">
		<link rel="stylesheet" href="CodeMirror/theme/neat.css">

		<link rel='stylesheet' href='http://at.alicdn.com/t/font_664078_c51qk1m6en1xlxr.css' />

		<!-- js导入

		<script type="text/javascript" src='js/index.js'></script> -->
		<script type="text/javascript" src='js/index2.js'></script>
		<script type="text/javascript" src='js/painter.js'></script>
		<script type="text/javascript" src='js/fontEffect.js'></script>
		<script type="text/javascript" src='js/file.js'></script>
		<script type="text/javascript" src='js/shadow.js'></script> 


	    <script src="CodeMirror/lib/codemirror.js" type="text/javascript"></script>
	    <!--Java/C++/C/C#代码高亮-->
	    <script src="CodeMirror/mode/clike/clike.js"></script>
	    <!-- 代码高亮 -->
	    <script src="CodeMirror/mode/go/go.js"></script>
	    <script src="CodeMirror/mode/CSS/css.js"></script>
	    <script src="CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
	    <script src="CodeMirror/mode/javascript/javascript.js"></script>
	    <script src="CodeMirror/mode/mysql/mysql.js"></script>
	    <script src="CodeMirror/mode/php/php.js"></script>
	    <script src="CodeMirror/mode/plsql/plsql.js"></script>
	    <script src="CodeMirror/mode/python/python.js"></script>
	    <script src="CodeMirror/mode/sql/sql.js"></script>
	    <script src="CodeMirror/mode/vb/vb.js"></script>
	    <script src="CodeMirror/mode/xml/xml.js"></script>
	    <script src="CodeMirror/addon/mode/loadmode.js"></script>
	    <script src="CodeMirror/mode/meta.js"></script>
	    <script src="js/insertCode.js"></script>
	    <!--括号匹配-->
	    <script src="CodeMirror/addon/edit/matchbrackets.js"></script>

		<script type="text/javascript" src='js/insertCode.js'></script>
		<!-- 分享逻辑 -->
		<script type="text/javascript" src='js/share.js'></script>

		<link rel='stylesheet' type='text/css' href='' />
		<link rel='stylesheet' type='text/css' href='jquery-ui-1.12.1.custom/jquery-ui.min.css' />
		<link rel='stylesheet' type='text/css' href='jquery-ui-1.12.1.custom/jquery-ui.structure.min.css' />
		<link rel='stylesheet' type='text/css' href='jquery-ui-1.12.1.custom/jquery-ui.theme.min.css' />

		<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
		<link rel='stylesheet' type='text/css' href='colorpicker-master/jquery.colorpicker.css' />
		<script type="text/javascript" src='colorpicker-master/jquery.colorpicker.js'></script>
		<script type="text/javascript" src='colorpicker-master/parts/jquery.ui.colorpicker-rgbslider.js'></script>
		<script type="text/javascript" src='js/mTips.js'></script>
	</head>
	<body>
		<div class='container-fluid'>
			<div id='header' class='row'>
				<div class='col-md-2'>
					<div id='logo'>
						<h1><span class='iconfont icon-text'></span>  RECORDER</h1>
					</div>
				</div>
				<div class='col-md-3'>
					<div class='form-search'>
						<i class='iconfont icon-search' id='searchBtn' data-mtpis='搜索'></i>
						<input type='text' id='searchNote' class='form-control' placeholder="检索笔记" />
					</div>
				</div>
				<div class='col-md-1' id='previousBtn'>
					<span class='iconfont icon-previous' data-mtpis='返回上一步'></span>
				</div>
				<div class='col-md-1' id='nextBtn'>
					<span class='iconfont icon-next' data-mtpis='跳转下一步'></span>
				</div>

				<div class='col-md-1' id='saveFile'>
					<span class='iconfont icon-save' data-mtpis='保存当前笔记'></span>
				</div>
				<div class='col-md-1' id='shareBtn'>
					<span class='iconfont icon-shareicon' data-mtpis='分享笔记内容'></span>
				</div>
				<div class='col-md-1' id='setting'>
					<span class='iconfont icon-peizhiconfiguration15' data-mtpis='系统设置'></span>
				</div>
				<!--
				<div class='col-md-2' id='userInfo'>
					<span class='userName iconfont icon-icon-user' data-mtpis='用户设置'></span> <span>USERNAME</span>
				</div>
			-->
				<div class='col-md-1' id='minimize'>
					<span class='iconfont icon-minimize' data-mtpis='最小化'></span>
				</div>
				<div class='col-md-1' id='closeBtn'>
					<span class='iconfont icon-close' data-mtpis='退出'></span>
				</div>
			</div>

			<div id='content' class='row'>
				<div class='col-md-5' id='fileManager'>
					<div class='col-md-5' id='directList'>
						<div id='navHead'><span class='iconfont icon-notebook'></span> <span>笔记目录</span></div>
						<span id='directFold' class='iconfont icon-format-horizontal-align-left' data-mtpis='折叠目录列表'></span>
						<ul id='noteDirectory' class='nav nav-pills nav-stacked'>
						</ul>
						<button class='btn' id='noteDirectoryAdd' data-mtpis='打开新笔记'><span class='iconfont icon-plus'></span></button>
					</div>
					<div class='col-md-7' id='noteList'>
						<div id='directTitle'><span class='iconfont icon-menu'></span> <span></span></div>
						<span id='noteFold' class='iconfont icon-format-horizontal-align-left' data-mtpis='折叠笔记列表'></span>
						<div id='noteContent'>

						</div>
						<button class='btn' id='noteAdd' data-mtpis='新建笔记'><span class='iconfont icon-createicon'></span></button>
					</div>
				</div>
				<div class='col-md-7' id='editContent'>
					<div class='col-md-2'>
						<span class='iconfont icon-tools' id='toolIcon'></span>
						<div id='paintPanel'>

							<p id='paintLabel'>绘制</p>
							<input type='text' id='strokecolorSetting' value='333333' data-mtpis='设置画笔笔触颜色' />

							<span id='pencil' class='tool_unclicked iconfont icon-pencil' tool-name='pencil' data-mtpis='画笔'></span>
							<span id='eraser' class='tool_unclicked iconfont icon-ico-erasertool-May' data-mtpis='橡皮'></span>
							<!--形状工具-->
							<span id='line' class='tool_unclicked iconfont icon-line' data-mtpis='线条'></span>
							<span id='rect' class='tool_unclicked iconfont icon-shape-rectangle-plus' data-mtpis='矩形'></span>
							<!--画布清空-->
							<span id='brush' class='iconfont icon-clearup' data-mtpis='清空画布'></span>
						</div>
						<div id='textPanel'>
							<p id='textLabel'>文本</p>

							<input type='text' id='fontcolorSetting' value='333333' data-mtpis='设置字体颜色'/>
							<!--字体大小设置-->
							<select id='fontsizeSetting' class='form-control' data-mtpis='选择字体字号'>
									<option>8</option>
									<option>10</option>
									<option>12</option>
									<option>16</option>
									<option selected>18</option>
									<option>20</option>
									<option>22</option>
									<option>24</option>
							</select>

							<!--字体类型设置 (待完善)-->
							<select id='fontstyleSetting' class='form-control' data-mtpis='选择字体类型'>
								<option>楷体</option>
								<option>宋体</option>
								<option>黑体</option>
								<option selected>微软雅黑</option>
							</select>

							<!--字体格式快速修正-->
							<span id='italicSetting' class='tool_unclicked iconfont icon-formatitalic' value='italic' data-mtpis='斜体'></span>
							<span id='boldSetting' class='tool_unclicked iconfont icon-format-bold' value="bold" data-mtpis='加粗'></span>
							<span id='underlineSetting' class='tool_unclicked iconfont icon-formatunderline' value="underline" data-mtpis='下划线'></span>
						</div>
					</div>
					<div class='col-md-10'>
						<input type='text' id='titleInput' placeholder="请输入标题" spellcheck='false'/>
						<div id='paintArea'>
							<canvas id='painter' width='689' height='555'></canvas>
							<div id='contentInput' contenteditable="true" spellcheck='false'></div>
						</div>
						<div class='row' id='coreTools'>
							<div class='col-md-4'>
								<span class='iconfont icon-code'></span> 	<b onclick='insertCode()'>代码嵌入</b>
							</div>
							<div class='col-md-4'>
								<span class='iconfont icon-text-shadow'></span> <b>影子通道</b>
							</div>
							<div class='col-md-4'>
								<span class='iconfont icon-backuprestore'></span> <b id='historyBtn'>历史记录</b>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>


		<!-- 历史记录模态框 -->
		<div class="modal fade" id="historyDetail" tabindex="-1" role="dialog" aria-labelledby="historyLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h4 class="modal-title" id="historyLabel">历史记录</h4>
		      </div>
		      <div class="modal-body">
		        <ul class='nav nav-pills nav-stacked' id='historyList'>
					<li id='item_0' class='item_current'><div class='wrapper'>
						<div class='historyType'><span class='iconfont icon-left'></span></div>
						<div class='historyText'><span>新建笔记</span></div>
						<div class='historyDel'><span class='iconfont icon-delete'></span><span style='display: none;'></span><span style='display: none;'></span></div>
						</div>
					</li><!--
					<li><div class='wrapper'>
						<div class='historyType'><span class='iconfont icon-left'></span></div>
						<div class='historyText'><span>调整字号</span></div>
						<div class='historyDel'><span class='iconfont icon-delete'></span><span></span><span></span></div></div>
					</li>
					<li><div class='wrapper'>
						<div class='historyType'><span class='iconfont icon-left'></span></div>
						<div class='historyText'><span>输入文字</span></div>
						<div class='historyDel'><span class='iconfont icon-delete'></span><span></span><span></span></div></div>
					</li>-->
		        </ul>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal" id='historyClose'>关闭</button>
		      </div>
		    </div>
		  </div>
		</div>

		<!-- 分享按钮模态框 -->
		<div class="modal fade" id="shareDetail" tabindex="-1" role="dialog" aria-labelledby="shareTitle">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h4 class="modal-title" id="shareTitle">分享笔记</h4>
		      </div>
		      <div class="modal-body">
		        <ul class='nav nav-tabs' id='shareApproach'>
		        	<li><a><span class='iconfont icon-qq' onclick="shareToQQ()"></span></a></li>
		        	<li><a><span class='iconfont icon-weixin' onclick="shareToWX()"></span></a></li>
		        	<li><a><span class='iconfont icon-renren' onclick="shareToRR()"></span></a></li>
		        	<li><a><span class='iconfont icon-qzone_F' onclick="shareToZone()"></span></a></li>
		        	<li><a><span class='iconfont icon-sina' onclick="shareToXl()"></span></a></li>
		        	<li><a><span class='iconfont icon-link'></span></a></li>
		        </ul>
		      </div>

		    </div>
		  </div>
		</div>
	</body>
</html>

<script type="text/javascript">



</script>